<template>
	<view class="subject-container">
		
		<view class="subject-box">
			<view class="subject-picker-item" v-for="(item,index) in options" :key="index" >
				<view class="picker-title">
					{{item.pickerTitle}}{{item.modeTxt}}<text v-if="item.required" style="color: red;">*</text>
				</view>
				<view class="picker-labels" >
					<view @click="subjectChoose(item,item2)" style="position: relative;" v-for="(item2,index2) in item.labels" :key="item2.id" >
						<view class="picker-label" :class="item2.check?'check':''" >
							{{item2.name}}
						</view>
						<view v-if="item2.check" class="check-label">
							<up-icon name="checkbox-mark" size="10" color="#fff"></up-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import config from '@/common/config'
	import {
		queryStringToObject
	} from '@/common/common'
	import { 
		ref,
		defineEmits,
		onMounted,
		defineComponent,
		watch
	} from 'vue'
	import {
		getHomeQueryTool
	} from '@/utils/request/api'
	
	export default defineComponent({
		props:{
			province:{
				default:'福建',
				type:String
			},
			subBackfill:{
				default:[],
				type:Array
			}
		},
		setup(props,{emit}){
			onMounted(()=>{
				console.log(props.province,'科目选择器收到的省份')
				switch (props.province){
					case '山东':
						options.value = mode_3
						break;
					case '浙江':
						options.value = mode_2
						break;
					case '安徽':
					case '河南':
					case '江西':
					case '四川':
						options.value = mode_4
						break;
					default:
						options.value = mode_1
						break;
				}
				if(props.subBackfill.length>0){
					props.subBackfill.forEach(e1=>{
						options.value.forEach(e2=>{
							e2.labels.forEach(e3=>{
								if(e3.name == e1){
									e3.check = true
								}
							})
						})
					})
				}
				
				console.log(options.value,'科目选择器数据')
				
			})
			const options = ref([])
			// 3+1+2 模式 例 : 福建
			const mode_1_province = ['']
			const mode_1 = [
				{
					pickerTitle:'首选科目',
					modeTxt:'（2选1）',
					required: true,
					maximum:1,
					labels:[
						{
							name:'物理',
							id:1,
							check:false
						},
						{
							name:'历史',
							id:2,
							check:false
						},
					]
				},
				{
					pickerTitle:'再选科目',
					modeTxt:'（4选2）',
					required: true,
					maximum:2,
					labels:[
						{
							name:'化学',
							id:3,
							check:false
						},
						{
							name:'生物',
							id:4,
							check:false
						},
						{
							name:'政治',
							id:5,
							check:false
						},
						{
							name:'地理',
							id:6,
							check:false
						},
					]
				}
			]
			
			// 7选3模式 例 : 浙江
			const mode_2_province = []
			const mode_2 = [
				{
					pickerTitle:'科目',
					modeTxt:'（7选3）',
					required: true,
					maximum:3,
					labels:[
						{
							name:'物理',
							id:1,
							check:false
						},
						{
							name:'历史',
							id:2,
							check:false
						},
						{
							name:'化学',
							id:3,
							check:false
						},
						{
							name:'生物',
							id:4,
							check:false
						},
						{
							name:'政治',
							id:5,
							check:false
						},
						{
							name:'地理',
							id:6,
							check:false
						},
						{
							name:'技术',
							id:7,
							check:false
						},
					]
				},
			]
			
			// 3+3模式 例 : 山东
			const mode_3_province = []
			const mode_3 = [
				{
					pickerTitle:'科目',
					modeTxt:'（6选3）',
					required: true,
					maximum:3,
					labels:[
						{
							name:'物理',
							id:1,
							check:false
						},
						{
							name:'历史',
							id:2,
							check:false
						},
						{
							name:'化学',
							id:3,
							check:false
						},
						{
							name:'生物',
							id:4,
							check:false
						},
						{
							name:'政治',
							id:5,
							check:false
						},
						{
							name:'地理',
							id:6,
							check:false
						}
					]
				}
			]
			
			const mode_4_province = ['']
			const mode_4 = [
				{
					pickerTitle:'科目',
					modeTxt:'（2选1）',
					required: true,
					maximum:1,
					labels:[
						{
							name:'历史组',
							id:1,
							check:false
						},
						{
							name:'物理组',
							id:2,
							check:false
						},
					]
				}
			]
			
			const subjectChoose = (item,item2)=>{
				const max_num = item.maximum
				
				if(max_num>1){
					//多选
					
					const current_num = item.labels.filter(e=>e.check).length
					if(max_num == current_num){
						
						if(item2.check){
							item2.check = !item2.check
						}else{
							return uni.$u.toast(`最多选择${max_num}个${item.pickerTitle}`)
						}
						
					}else{
						item2.check = !item2.check
					}
					
				}else{
					//单选
					item.labels.forEach(e=>e.check = false)
					item2.check = !item2.check
				}
				
				emit('choose',options.value)
				
			}
			
			
			return {
				options,
				subjectChoose
			}
		}
	})
</script>

<style lang="scss">
	.subject-container{
		width: 100%;
	}
	.subject-box{
		width: 100%;
		
		.subject-picker-item{
			margin: 20rpx 0 ;
			
			
			.picker-title{
				font-size: 32rpx;
			}
			.picker-labels{
				margin: 30rpx 0;
				display: grid;
				grid-template-columns: 1fr 1fr 1fr 1fr;
				gap: 30rpx;
				
				.picker-label{
					box-sizing: border-box;
					padding: 22rpx;
					border-radius: 8rpx;
					background: #F4F4F4;
					text-align: center;
					overflow: hidden;
					color: var(--gray-6);
					border: 2rpx solid transparent;
					transition: all 0.5s;
					
					&.check{
						border: 2rpx solid var(--color);
						color: var(--color);
						background-color: white;
					}
				}
				
				.check-label{
					position: absolute;
					bottom: 0;
					right: 0;
					width: 20rpx;
					height: 20rpx;
					background-color: var(--color);
					border-radius: 4rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}
</style>